<template>
  <div class="course-detail-page">
    <!-- 顶部导航栏 -->
    <div class="top-navbar">
      <div class="navbar-container">
        <div class="navbar-left">
          <router-link to="/" class="logo-link">
            <svg viewBox="0 0 24 24" width="32" height="32" fill="currentColor">
              <path d="M12 2L2 7v10c0 5.55 3.84 10.74 9 12 5.16-1.26 9-6.45 9-12V7l-10-5z"/>
            </svg>
            <span class="logo">M-Learning</span>
          </router-link>
        </div>
        
        <div class="navbar-center">
          <router-link to="/" class="nav-link">首页</router-link>
          <router-link to="/learning" class="nav-link">在线学习</router-link>
          <router-link to="/problems" class="nav-link">在线答题</router-link>
          <router-link to="/discussion" class="nav-link">学习社区</router-link>
          <router-link to="/profile" class="nav-link">个人中心</router-link>
        </div>
        
        <div class="navbar-right">
          <div class="user-info">
            <img :src="getAvatarUrl(userInfo.avatar)" class="user-avatar" alt="头像" />
            <span class="username">{{ userInfo.username }}</span>
          </div>
        </div>
      </div>
    </div>

    <!-- 主内容 -->
    <div v-if="loading" class="loading-container">
      <div class="loading-spinner"></div>
      <p>加载中...</p>
    </div>

    <div v-else-if="course" class="main-content">
      <!-- 课程头部 -->
      <div class="course-header">
        <div class="header-content">
          <div class="breadcrumb">
            <router-link to="/learning">在线学习</router-link>
            <span class="separator">›</span>
            <span>{{ course.title }}</span>
          </div>
          
          <h1 class="course-title">{{ course.title }}</h1>
          <p class="course-desc">{{ course.description }}</p>
          
          <div class="course-meta">
            <span class="meta-item">
              <svg viewBox="0 0 24 24" width="16" height="16" fill="currentColor">
                <path d="M12 2L2 7v10c0 5.55 3.84 10.74 9 12 5.16-1.26 9-6.45 9-12V7l-10-5z"/>
              </svg>
              {{ course.categoryName }}
            </span>
            <span :class="['meta-item', 'difficulty', course.difficulty]">
              {{ getDifficultyText(course.difficulty) }}
            </span>
            <span class="meta-item">
              <svg viewBox="0 0 24 24" width="16" height="16" fill="currentColor">
                <path d="M8 5v14l11-7z"/>
              </svg>
              {{ course.videoCount }} 个视频
            </span>
            <span class="meta-item">
              <svg viewBox="0 0 24 24" width="16" height="16" fill="currentColor">
                <path d="M16 11c1.66 0 2.99-1.34 2.99-3S17.66 5 16 5c-1.66 0-3 1.34-3 3s1.34 3 3 3zm-8 0c1.66 0 2.99-1.34 2.99-3S9.66 5 8 5C6.34 5 5 6.34 5 8s1.34 3 3 3zm0 2c-2.33 0-7 1.17-7 3.5V19h14v-2.5c0-2.33-4.67-3.5-7-3.5zm8 0c-.29 0-.62.02-.97.05 1.16.84 1.97 1.97 1.97 3.45V19h6v-2.5c0-2.33-4.67-3.5-7-3.5z"/>
              </svg>
              {{ course.studentCount }} 人学习
            </span>
          </div>
          
          <div class="instructor-info">
            <img :src="getAvatarUrl(course.instructor?.avatar)" :alt="course.instructor?.name" class="instructor-avatar" />
            <div class="instructor-detail">
              <div class="instructor-name">{{ course.instructor?.name }}</div>
              <div class="instructor-bio">{{ course.instructor?.bio }}</div>
            </div>
          </div>
          
          <!-- 学习进度 -->
          <div v-if="course.progress > 0" class="course-progress-bar">
            <div class="progress-label">
              <span>学习进度</span>
              <span class="progress-percent">{{ course.progress }}%</span>
            </div>
            <div class="progress-track">
              <div class="progress-fill" :style="{ width: course.progress + '%' }"></div>
            </div>
          </div>
        </div>
      </div>

      <!-- 章节列表 -->
      <div class="chapters-container">
        <h2 class="section-title">课程内容</h2>
        
        <div v-if="chapters.length === 0" class="empty-chapters">
          <p>该课程暂无章节内容</p>
        </div>
        
        <div v-else class="chapters-list">
          <div v-for="(chapter, index) in chapters" :key="chapter.id" class="chapter-item">
            <div class="chapter-header" @click="toggleChapter(chapter.id)">
              <div class="chapter-title">
                <svg 
                  viewBox="0 0 24 24" 
                  width="20" 
                  height="20" 
                  fill="currentColor"
                  :class="['expand-icon', { expanded: expandedChapters.includes(chapter.id) }]"
                >
                  <path d="M10 6L8.59 7.41 13.17 12l-4.58 4.59L10 18l6-6z"/>
                </svg>
                <span class="chapter-number">第{{ index + 1 }}章</span>
                <span class="chapter-name">{{ chapter.title }}</span>
              </div>
              <span class="chapter-count">{{ chapter.videos?.length || 0 }} 个视频</span>
            </div>
            
            <transition name="slide-fade">
              <div v-if="expandedChapters.includes(chapter.id)" class="videos-list">
                <div 
                  v-for="(video, vIndex) in chapter.videos" 
                  :key="video.id"
                  class="video-item"
                  :class="{ completed: video.completed, playing: currentVideoId === video.id }"
                  @click="playVideo(video.id)"
                >
                  <div class="video-order">{{ vIndex + 1 }}</div>
                  <div class="video-info">
                    <div class="video-title">{{ video.title }}</div>
                    <div class="video-meta">
                      <span class="video-duration">{{ formatDuration(video.duration) }}</span>
                      <span v-if="video.progress > 0" class="video-progress">已学 {{ video.progress }}%</span>
                    </div>
                  </div>
                  <div class="video-status">
                    <svg v-if="video.completed" viewBox="0 0 24 24" width="20" height="20" fill="currentColor" class="icon-completed">
                      <path d="M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z"/>
                    </svg>
                    <svg v-else-if="currentVideoId === video.id" viewBox="0 0 24 24" width="20" height="20" fill="currentColor" class="icon-playing">
                      <path d="M8 5v14l11-7z"/>
                    </svg>
                    <svg v-else viewBox="0 0 24 24" width="20" height="20" fill="currentColor" class="icon-play">
                      <path d="M8 5v14l11-7z"/>
                    </svg>
                  </div>
                </div>
              </div>
            </transition>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, computed, onMounted } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import { useUserStore } from '../stores/user'
import { getCourseDetail } from '../api/learning'

const route = useRoute()
const router = useRouter()
const userStore = useUserStore()

const userInfo = computed(() => userStore.userInfo)
const courseId = ref(route.params.courseId)

const loading = ref(false)
const course = ref(null)
const chapters = ref([])
const expandedChapters = ref([])
const currentVideoId = ref(null)

function getAvatarUrl(avatar) {
  if (!avatar) return 'https://via.placeholder.com/32'
  if (avatar.startsWith('http')) return avatar
  return `${import.meta.env.VITE_API_BASE_URL || ''}${avatar}`
}

function getDifficultyText(difficulty) {
  const map = {
    'beginner': '入门',
    'intermediate': '进阶',
    'advanced': '高级'
  }
  return map[difficulty] || difficulty
}

function formatDuration(seconds) {
  if (!seconds) return '00:00'
  const mins = Math.floor(seconds / 60)
  const secs = seconds % 60
  return `${String(mins).padStart(2, '0')}:${String(secs).padStart(2, '0')}`
}

function toggleChapter(chapterId) {
  const index = expandedChapters.value.indexOf(chapterId)
  if (index > -1) {
    expandedChapters.value.splice(index, 1)
  } else {
    expandedChapters.value.push(chapterId)
  }
}

function playVideo(videoId) {
  currentVideoId.value = videoId
  router.push(`/learning/video/${videoId}`)
}

async function loadCourseDetail() {
  loading.value = true
  try {
    const res = await getCourseDetail(courseId.value)
    console.log('✅ 课程详情:', res)
    
    if (res.code === 200) {
      course.value = res.data
      chapters.value = res.data.chapters || []
      
      // 默认展开第一章
      if (chapters.value.length > 0) {
        expandedChapters.value = [chapters.value[0].id]
      }
    }
  } catch (error) {
    console.error('❌ 加载课程详情失败:', error)
    alert('加载失败：' + error.message)
  } finally {
    loading.value = false
  }
}

onMounted(() => {
  loadCourseDetail()
})
</script>

<style scoped lang="scss">
.course-detail-page {
  min-height: 100vh;
  background: #f8f9fa;
}

// 顶部导航栏
.top-navbar {
  background: white;
  border-bottom: 1px solid #d0d7de;
  position: sticky;
  top: 0;
  z-index: 100;
  
  .navbar-container {
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 24px;
    height: 64px;
    display: flex;
    align-items: center;
    justify-content: space-between;
  }
  
  .navbar-left {
    .logo-link {
      display: flex;
      align-items: center;
      gap: 8px;
      text-decoration: none;
      color: #667eea;
      
      svg {
        color: #667eea;
      }
      
      .logo {
        font-size: 20px;
        font-weight: 700;
      }
    }
  }
  
  .navbar-center {
    display: flex;
    gap: 8px;
    
    .nav-link {
      padding: 8px 16px;
      color: #57606a;
      text-decoration: none;
      border-radius: 6px;
      transition: all 0.2s;
      
      &:hover, &.router-link-active {
        background: #f6f8fa;
        color: #24292f;
      }
    }
  }
  
  .navbar-right {
    .user-info {
      display: flex;
      align-items: center;
      gap: 8px;
      
      .user-avatar {
        width: 32px;
        height: 32px;
        border-radius: 50%;
        object-fit: cover;
      }
      
      .username {
        font-size: 14px;
        color: #24292f;
      }
    }
  }
}

// 加载状态
.loading-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 400px;
  
  .loading-spinner {
    width: 40px;
    height: 40px;
    border: 3px solid #f3f3f3;
    border-top: 3px solid #667eea;
    border-radius: 50%;
    animation: spin 1s linear infinite;
  }
  
  p {
    margin-top: 16px;
    color: #57606a;
  }
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

// 主内容
.main-content {
  max-width: 1200px;
  margin: 0 auto;
  padding: 32px 24px;
}

// 课程头部
.course-header {
  background: white;
  border-radius: 12px;
  padding: 32px;
  margin-bottom: 24px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
  
  .breadcrumb {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 16px;
    font-size: 14px;
    color: #57606a;
    
    a {
      color: #667eea;
      text-decoration: none;
      
      &:hover {
        text-decoration: underline;
      }
    }
    
    .separator {
      color: #d0d7de;
    }
  }
  
  .course-title {
    font-size: 32px;
    font-weight: 700;
    color: #24292f;
    margin: 0 0 12px 0;
  }
  
  .course-desc {
    font-size: 16px;
    color: #57606a;
    line-height: 1.6;
    margin-bottom: 20px;
  }
  
  .course-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    margin-bottom: 24px;
    
    .meta-item {
      display: flex;
      align-items: center;
      gap: 6px;
      font-size: 14px;
      color: #57606a;
      
      svg {
        opacity: 0.7;
      }
      
      &.difficulty {
        padding: 4px 12px;
        border-radius: 4px;
        font-weight: 600;
        
        &.beginner {
          background: #d4edda;
          color: #155724;
        }
        
        &.intermediate {
          background: #fff3cd;
          color: #856404;
        }
        
        &.advanced {
          background: #f8d7da;
          color: #721c24;
        }
      }
    }
  }
  
  .instructor-info {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 16px;
    background: #f6f8fa;
    border-radius: 8px;
    margin-bottom: 24px;
    
    .instructor-avatar {
      width: 48px;
      height: 48px;
      border-radius: 50%;
      object-fit: cover;
    }
    
    .instructor-detail {
      flex: 1;
      
      .instructor-name {
        font-size: 16px;
        font-weight: 600;
        color: #24292f;
        margin-bottom: 4px;
      }
      
      .instructor-bio {
        font-size: 14px;
        color: #57606a;
      }
    }
  }
  
  .course-progress-bar {
    .progress-label {
      display: flex;
      justify-content: space-between;
      margin-bottom: 8px;
      font-size: 14px;
      color: #57606a;
      
      .progress-percent {
        font-weight: 600;
        color: #667eea;
      }
    }
    
    .progress-track {
      height: 8px;
      background: #e1e4e8;
      border-radius: 4px;
      overflow: hidden;
      
      .progress-fill {
        height: 100%;
        background: linear-gradient(90deg, #667eea 0%, #764ba2 100%);
        transition: width 0.3s;
      }
    }
  }
}

// 章节列表
.chapters-container {
  background: white;
  border-radius: 12px;
  padding: 32px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
  
  .section-title {
    font-size: 24px;
    font-weight: 700;
    color: #24292f;
    margin: 0 0 24px 0;
  }
  
  .empty-chapters {
    text-align: center;
    padding: 60px 0;
    color: #57606a;
  }
}

.chapters-list {
  .chapter-item {
    border: 1px solid #d0d7de;
    border-radius: 8px;
    margin-bottom: 16px;
    overflow: hidden;
    
    &:last-child {
      margin-bottom: 0;
    }
    
    .chapter-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 16px 20px;
      background: #f6f8fa;
      cursor: pointer;
      transition: background 0.2s;
      
      &:hover {
        background: #eef1f4;
      }
      
      .chapter-title {
        display: flex;
        align-items: center;
        gap: 12px;
        
        .expand-icon {
          transition: transform 0.2s;
          color: #57606a;
          
          &.expanded {
            transform: rotate(90deg);
          }
        }
        
        .chapter-number {
          font-size: 14px;
          font-weight: 600;
          color: #667eea;
        }
        
        .chapter-name {
          font-size: 16px;
          font-weight: 600;
          color: #24292f;
        }
      }
      
      .chapter-count {
        font-size: 14px;
        color: #57606a;
      }
    }
  }
}

.videos-list {
  border-top: 1px solid #d0d7de;
  
  .video-item {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 16px 20px;
    border-bottom: 1px solid #eef1f4;
    cursor: pointer;
    transition: background 0.2s;
    
    &:last-child {
      border-bottom: none;
    }
    
    &:hover {
      background: #f6f8fa;
    }
    
    &.completed {
      .video-title {
        color: #57606a;
      }
    }
    
    &.playing {
      background: #f0f3ff;
    }
    
    .video-order {
      width: 32px;
      height: 32px;
      display: flex;
      align-items: center;
      justify-content: center;
      background: #e1e4e8;
      border-radius: 50%;
      font-size: 14px;
      font-weight: 600;
      color: #57606a;
      flex-shrink: 0;
    }
    
    .video-info {
      flex: 1;
      
      .video-title {
        font-size: 15px;
        color: #24292f;
        margin-bottom: 4px;
      }
      
      .video-meta {
        display: flex;
        gap: 12px;
        font-size: 13px;
        color: #57606a;
        
        .video-progress {
          color: #667eea;
          font-weight: 600;
        }
      }
    }
    
    .video-status {
      flex-shrink: 0;
      
      .icon-completed {
        color: #28a745;
      }
      
      .icon-playing {
        color: #667eea;
      }
      
      .icon-play {
        color: #57606a;
      }
    }
  }
}

// 过渡动画
.slide-fade-enter-active {
  transition: all 0.3s ease-out;
}

.slide-fade-leave-active {
  transition: all 0.2s ease-in;
}

.slide-fade-enter-from {
  opacity: 0;
  transform: translateY(-10px);
}

.slide-fade-leave-to {
  opacity: 0;
  transform: translateY(-10px);
}
</style>






